body {
    text-align: center;
    background-color: #0e141b;
    color: rgba(224, 230, 235, 0.89);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    overflow: hidden;
}

.column,
.colon {
    display: inline-block;
    vertical-align: top;
    font-size: 86px;
    line-height: 86px;
}

.column {
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
}

.colon {
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transform: translateY(calc(50vh - 43px));
    transform: translateY(calc(50vh - 43px));
}

.colon:after {
    content: ':';
}

.num {
    -webkit-transition: opacity 500ms, text-shadow 100ms;
    transition: opacity 500ms, text-shadow 100ms;
    opacity: 0.025;
}

.num.visible {
    opacity: 1.0;
    text-shadow: 1px 1px 0px #336699;
}

.num.close {
    opacity: 0.35;
}

.num.far {
    opacity: 0.15;
}

.num.distant {
    opacity: 0.1;
}